<template>

    <view style="text-align: center">
      <view class="ui-tabbar__list">
        <view
            class="ui-tabbar__item"
            :class="{'is-active': item.name === value}"
            v-for="(item, index) in items"
            :id="`item-${index}`"
            :key="index"
            @click="handleItemClick(item, index)"
        >
          <slot name="item" :item="item" :scope="scope">
            <text>{{item.label  }}</text><text  v-if="item.badge>0"  class="order__tabbar-item-badge" >{{item.badge>0?item.badge:''}}</text>
          </slot>
        </view>
      </view>
    </view>
</template>
<script>
export default {
  name:"OrderItems",
  props: {
    value: {
      type: String
    },
    items: {
      type: Array,
      default: () => []
    },
    scope: {
      type: Object
    },
    orderCount: {
      type: Object
    },
    processcount: {
      type: Number
    },
  },
  data() {
    return {
      scrollIntoViewId: null
    }
  },
  methods: {
    handleItemClick(item, index) {
      this.scrollIntoViewId = `item-${index}`
      this.$emit('input', item.name)
      this.$emit('item-click', {
        item
      })
    }
  }
}
</script>

<style lang="scss">
ui-tabbar {
  width: 100%;
}

.ui-tabbar__list {
  display: flex;
  flex-direction: row;
  min-width: 100%;
  //white-space: nowrap;
  justify-content: center
}

.ui-tabbar__item {
  font-size: 25rpx;
  text-align: center;
  padding: 6px 0;
  margin: 0 12px;
  height: 24px;
  line-height: 24px;
  position: relative;
  color: #999;
  text-align: center;

  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    border-radius: 1px;
    transform: translateX(-50%);
    background-color: #F47554;
    transition: width .3s;
  }

  &.is-active {
    color: #F47554;
    font-weight: bold;

    &:after {
      width: 120rpx;
    }
  }

  &:first-child {
    margin-left: 0;
    margin-right: 120rpx
  }

  &:last-child {
    margin-right: 0;
    margin-left: 120rpx;

  }
}
.ui-tabbar{
  text-align: center;
}
.order__tabbar-item-badge {
  display: inline-block;
  height: 35rpx;
  line-height: 35rpx;
  color: #fff;
  background-color: #c00;
  padding: 0 10rpx;
  border-radius: 20rpx;
  font-size: 25rpx;
  vertical-align: top;
  margin-top: 6rpx;
  margin-left: 6rpx;
}
</style>
